<!--选择地址-->
<template>
  <div class="has-header">
    <headerbar @search="search()" :isShowSearch="false" :title="'选择地址'"></headerbar>
    <div v-if="address" class="bg-white map-address">
      {{address}}
    </div>
   <!-- <el-amap ref="map" :zoom="zoom" class="map">
      <el-amap-marker :plugin="plugin" vid="component-marker" :draggable="marker.draggable" :events="marker.events"></el-amap-marker>
    </el-amap>-->


    <map-component @leaveSelectAdress="save"></map-component>

    <!--<div class="block-btn" @click="save()">确定</div>-->
  </div>
</template>

<script>
  import headerbar from '../layout/headerbar'
  import mapComponent from '@/components/common/mapComponent.vue'
  import tools from '@/utils/tools'
  export default {
    name: '',
    components: {
      headerbar, mapComponent
    },
    data () {
      let self = this;
      return {
        slotStyle: {
          padding: '2px 8px',
          background: '#eee',
          color: '#333',
          border: '1px solid #aaa'
        },
        geocoder: '',
        address: '',
        center: [107.520386, 26.686335],
        zoom: 16,
        lng: 0,
        lat: 0,
        loaded: false,
        plugin: [{
          pName: 'Geolocation',
          events: {
            init (o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                console.log(result)
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  self.markers.center = self.center
                  console.log(result)
                  this.geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: 'all'
                  })
                  this.geocoder.getAddress(result.position, (status, result) => {
                    if (status === 'complete' && result.regeocode) {
                      self.address = result.regeocode.formattedAddress
                    }
                  })
                  self.loaded = true
                  self.$nextTick()
                }
              })
            }
          }
        }],
        marker: {
          position: [107.520386, 26.686335],
          events: {
            click: () => {
            },
            dragend: (e) => {
              this.marker.position = [e.lnglat.lng, e.lnglat.lat]
              this.geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
              })
              this.geocoder.getAddress(e.lnglat, (status, result) => {
                if (status === 'complete' && result.regeocode) {
                  this.address = result.regeocode.formattedAddress
                }
              })
            }
          },
          visible: true,
          draggable: true
        }
      }
    },
    created () {
    },
    methods: {
      save (data) {
        let self = this
        if (data.lat > 0) {
          console.log(data)
          self.$sessionStorage.set('illegalAddress', {
            illegalAddress: data.sendPosition,
            illegalAddressZb: `${data.lng},${data.lat}`
          })
          tools.back()
          return false
        }
        this.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        })
        if (this.geocoder) {
          this.geocoder.getAddress(self.marker.position, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              self.address = result.regeocode.formattedAddress
              self.$sessionStorage.set('illegalAddress', {illegalAddress: self.address, illegalAddressZb: self.marker.position.join(',')})
              tools.back()
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/variable.scss";
  .map {
    height:70%;
  }
</style>
